<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

        <script type="module" src="http://localhost:8080/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
        <script type="module" src="http://localhost:8080/node_modules/@perspective-dev/viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>

        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/viewer/dist/css/themes.css" />

        <style>
            perspective-viewer {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <perspective-viewer id="viewer" ,> </perspective-viewer>

        <script type="module">
            import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
            import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";
            const viewer = document.getElementById("viewer");

            // Create a client that expects a Perspective server to accept
            // Websocket connections at the specified URL.
            const websocket = await perspective.websocket("ws://localhost:8080/websocket");

            /* This shows Perspective running in "server mode": the `table`
                variable is a proxy for the `Table` we created on the server.
                
                All operations that are possible through the Javascript API are
                possible on the Python API as well, thus calling `view()`,
                `schema()`, `update()` etc on `const table` will pass those
                operations to the Python `Table`, execute the commands,
                and return the result back to Javascript.
                */
            const table = await websocket.open_table("data_source_one");

            // Load this in the `<perspective-viewer>`.
            viewer.load(table);
            viewer.restore({
                plugin: "Datagrid",
                aggregates: {
                    high: "avg",
                    low: "avg",
                },
                columns: ["high", "low"],
                group_by: ["client"],
                split_by: ["name"],
            });

            // viewer.toggleConfig();
        </script>
    </body>
</html>
